<template>
  <div class="step">
    <h2 class="title">{{ title }}</h2>

    <form ref="form">
      <div class="step_wrap" v-for="(item, index) in num" :key="item" ref="box">
        <h6 class="num">步骤{{ item }}</h6>

        <div class="uploader">
          <input
            type="file"
            class="file"
            :name="'file' + item"
            ref="file"
            @change="up($event, index)"
            accept="image/gif, image/jpeg"
          />
          <div class="cover" v-if="!list[index]">
            <slot></slot>
          </div>

          <div class="cover" v-else>
            <img :src="list[index]" alt="" class="img" ref="img" />
            <i class="iconfont icon-chacha" @click.stop="del(index)"></i>
          </div>
        </div>

        <div class="con_wrap">
          <input
            type="text"
            class="input"
            placeholder="添加步骤说明"
            :name="'title' + item"
            ref="title"
          />
        </div>
      </div>
    </form>

    <p @click="addAction" class="add">再新增一行</p>
  </div>
</template>

<script>
export default {
  name: "Step",
  props: {
    title: String,
  },
  data() {
    return {
      num: 1,
      list: [],
    };
  },
  methods: {
    // 添加步骤
    addAction() {
      this.num++;
    },
    // 读取图片数据
    up(x, index) {
      // 读取文件:
      let reader = new FileReader();
      // 以DataURL的形式读取文件:
      reader.readAsDataURL(x.target.files[0]);
      reader.onload = (res) => {
        this.$set(this.list, index, res.target.result);
      };
    },

    getAllData() {
      const formData = new FormData(this.$refs.form);
      formData.append("stepNum", this.num);
      let flag = true;
      for (let i = 0; i < this.num; i++) {
        if (this.$refs.file[i].value == "") {
          flag = false;
          return;
        }
        if (this.$refs.title[i].value == "") {
          flag = false;
          return;
        }
      }
      if (flag) {
        return formData;
      }
      return;
    },
    del(index) {
      this.$refs.file[index].value = "";
      this.$set(this.list, index, false);
    },
  },
};
</script>

<style lang="scss" scoped>
.step {
  margin-top: 6.6667vw;
  padding-bottom: 6.6667vw;
  .title {
    font-weight: 800;
    font-size: 4.5vw;
  }
  .num {
    margin: 4.5vw 0;
  }
  .uploader {
    width: 100%;
    height: 40vw;
    position: relative;
    .file {
      position: absolute;
      opacity: 0;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }
    .cover {
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      background: #f8f8f8;
      overflow: hidden;

      img {
        width: 100%;
      }
      .icon-chacha {
        font-style: normal;
        font-size: 6.6667vw;
        line-height: 6.6667vw;
        position: absolute;
        right: 2vw;
        top: 2vw;
        background: #eeeeee;
        border-radius: 100%;
        z-index: 1;
      }
    }
  }
  .con_wrap {
    padding: 25px 0;
    width: 100%;
    display: flex;
    position: relative;
    &:before {
      content: "";
      pointer-events: none; /* 防止点击触发 */
      box-sizing: border-box;
      position: absolute;
      width: 200%;
      height: 200%;
      left: 0;
      bottom: 0;
      border-bottom: 1px solid #f2f1f1;
      transform: scale(0.5);
      transform-origin: 0 100%;
    }
    .input {
      width: 50%;
      outline: none;
      border: 0;
      font-size: 18px;

      &::placeholder {
        color: #bcbcbc;
      }
    }
  }
  .add {
    margin-top: 20px;
    color: #3a57f0;
    font-size: 16px;
  }
}
</style>
